<template>
  <div class="relative w-full h-full bg-black text-white">
    <transition-group name="fade">
      <div
        class="absolute left-0 top-0 w-3/5 h-full flex justify-center items-center"
        v-for="role in roleArr"
        :key="role.id"
        v-show="role.id == activeRoleIndex"
        @mousewheel="changeCurrentRole"
      >
        <img :src="role.img" class="w-full h-full object-contain object-top" alt="diana"/>
        <div class="text-5xl vertical-rl">{{ role.name }}</div>
      </div>
    </transition-group>
    <div class="absolute top-0 right-0 w-2/5 h-full pt-32 pr-16 vertical-rl">
      <h1 class="text-5xl">A-SOUL</h1>
      <p class="mx-8">和她们一起，遇见更好的自己。</p>
      <div
        class="cursor-pointer hover:underline text-xl"
        @click="goToNavigation"
      >进入枝江</div>
    </div>
  </div>
</template>

<script>
  import lichun from '../assets/images/lichun.jpg'
  import yushui from '../assets/images/yushui.jpg'
  import jingzhe from '../assets/images/jingzhe.png'
  import chunfen from '../assets/images/chunfen.png'
  import qingming from '../assets/images/qingming.jpg'
  import guyu from '../assets/images/guyu.png'
  import lixia from '../assets/images/lixia.png'
  import xiaoman from '../assets/images/xiaoman.png'
  import mangzhong from '../assets/images/mangzhong.png'
  import xiazhi from '../assets/images/xiazhi.png'
  import xiaoshu from '../assets/images/xiaoshu.png'
  import dashu from '../assets/images/dashu.png'
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  export default {
    setup() {

      const router = useRouter()
      const roleArr = [
        { name: '立春', id: 1, img: lichun },
        { name: '雨水', id: 2, img: yushui },
        { name: '惊蛰', id: 3, img: jingzhe },
        { name: '春分', id: 4, img: chunfen },
        { name: '清明', id: 5, img: qingming },
        { name: '谷雨', id: 6, img: guyu },
        { name: '立夏', id: 7, img: lixia },
        { name: '小满', id: 8, img: xiaoman },
        { name: '芒种', id: 9, img: mangzhong },
        { name: '夏至', id: 10, img: xiazhi },
        { name: '小暑', id: 11, img: xiaoshu },
        { name: '大暑', id: 12, img: dashu },
      ]
      const activeRoleIndex = ref(1)

      const changeCurrentRole = (e) => {
        if (e.deltaY < 0) {
          activeRoleIndex.value -= 1;
        } else {
          activeRoleIndex.value += 1;
        }

        if (activeRoleIndex.value < 1) {
          activeRoleIndex.value = roleArr.length ;
        } else if (activeRoleIndex.value > roleArr.length) {
          activeRoleIndex.value = 1;
        }
      }

      const goToNavigation = () => {
        router.push({ name: 'Home'})
      }

      return {
        roleArr,
        activeRoleIndex,
        changeCurrentRole,
        goToNavigation
      }
    }
  }
</script>

<style>
  .fade-enter-from,.fade-leave-to {
    opacity: 0;
  }
  .fade-enter-to,.fade-leave-from {
    opacity: 1;
  }
  .fade-enter-active,.fade-leave-active {
    transition: opacity 0.5s ease;
  }
</style>